<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>
  // 常量路由:全部的用户都可以访问到的路由
  let constRoute = [
    {
      // 登录
      path:'/login',
      component:()=>import ('@/views/login/index.vue'),
      name:'login',  //命名路由
      meta:{
        title:'登录', //菜单标题
        hidden:true, //路由标题在菜单中是否隐藏 true:隐藏 false:隐藏
        icon:'Promotion',  //菜单文字左侧的图标--支持element-plus全部图标
      }
    },
    {
      // 登录成功以后展示数据的路由
      path:'/',
      component:()=>import ('@/layout/index.vue'),
      name:'layout',
      meta:{
        title:'', //菜单标题
        hidden:false,
        icon:''
      },
      redirect:'/home',
      children:[
        {
          path:'/home',
          component:()=>import('@/views/home/index.vue'),
          meta:{
            title:'首页', //菜单标题
            hidden:false,
            icon:'HomeFilled'
          }
        },
        
      ]
    },
    {
      // 404
      path:'/404',
      component:()=>import('@/views/404/index.vue'),
      name:'404',
      meta:{
        title:'404', //菜单标题
        hidden:true,
        icon:'Comment'
      }
    },
    {
      path:'/screen',
      component:()=>import('@/views/screen/index.vue'),
      name:'Screen',
      meta:{
        hidden:false,
        title:'数据大屏',
        icon:'Platform'
      }
    },
  ]
  // 异步路由:用户有的人有这个路由有的人没有[动态追加异步路由]
  let asyncRoute = [
    {
      path:'/acl',
      component:()=>import('@/layout/index.vue'),
      name:'Acl',
      meta:{
        title:'权限管理',
        hidden:false,
        icon:'Lock'
      },
      redirect:'/acl/user',
      children:[
        {
          path:'/acl/user',
          component:()=>import('@/views/acl/user/index.vue'),
          name:'User',
          meta:{
            title:'用户管理',
            hidden:false,
            icon:'User'
          }
        },
        {
          path:'/acl/role',
          component:()=>import('@/views/acl/role/index.vue'),
          name:'Role',
          meta:{
            title:'角色管理',
            hidden:false,
            icon:'UserFilled'
          }
        },
        {
          path:'/acl/permission',
          component:()=>import('@/views/acl/permission/index.vue'),
          name:'Permission',
          meta:{
            title:'菜单管理',
            hidden:false,
            icon:'Grid'
          }
        },
      ]
    },
    {
      path:'/product',
      component:()=>import('@/layout/index.vue'),
      name:'Product',
      meta:{
        title:'商品管理',
        icon:'Goods',
        hidden:false
      },
      redirect:'/product/trademark',
      children:[
        {
          path:'/product/trademark',
          component:()=>import('@/views/product/trademark/index.vue'),
          name:'Trademark',
          meta:{
            title:'品牌管理',
            icon:'ShoppingCartFull',
            hidden:false
          }
        },
        {
          path:'/product/attr',
          component:()=>import('@/views/product/attr/index.vue'),
          name:'Attr',
          meta:{
            title:'属性管理',
            icon:'ChromeFilled',
            hidden:false
          }
        },
        {
          path:'/product/spu',
          component:()=>import('@/views/product/spu/index.vue'),
          name:'Spu',
          meta:{
            title:'SPU管理',
            icon:'Calendar',
            hidden:false
          }
        },
        {
          path:'/product/sku',
          component:()=>import('@/views/product/sku/index.vue'),
          name:'Sku',
          meta:{
            title:'SKU管理',
            icon:'Orange',
            hidden:false
          }
        },
      ]
    },
  ]
  // 任意路由:
  let anyRoute = [
    // 任意路由
    {
      path:'/:pathMatch(.*)*',
      redirect:'/404',
      name:'Any',
      meta:{
        title:'任意路由', //菜单标题
        hidden:true,
        icon:'DataLine'
      }
    }
  ]

  let guigu = ['Product','Trademark','Sku']
  function filterAsyncRoute(asyncRoute,routes){
    return asyncRoute.filter(item=>{
      if(routes.includes(item.name)){
        if(item.children&&item.children.length>0){
          item.children = filterAsyncRoute(item.children,routes)
        }
        return true
      }
    })
  }
  let guiguResult = filterAsyncRoute(asyncRoute,guigu)
  // console.log(guiguResult)
  console.log([...constRoute,...guiguResult,...anyRoute],guigu)
  console.log(asyncRoute)

  // 第二个人登录：对比的全部异步路由发生变化
  let guigu1=['Product','Spu']
  console.log(asyncRoute)
</script>